<template>
	<div class="d-flex flex-column container">
		<!--	上	-->
		<div class="d-flex a-center j-sb content_top">
			<div class="d-flex flex-column">
				<CommonTitle class="m-b20" titleName="资金情况分析"></CommonTitle>
				<div class="left-card-style">
					<FundAnalysis ref="moduleRef1" :year="state.year"></FundAnalysis>
				</div>
			</div>

			<div class="content_middle center-card-style">
				<div>
					<el-date-picker
							:clearable="false"
							v-model="state.year"
							type="year"
							value-format="YYYY"
							placeholder="请选择年"
					/>
					<el-button class="m-l5" size="small" @click="onSearch">搜索</el-button>
				</div>
				<div class="boxCol-2 d-flex m-t10 j-sb">
					<div class="item_col d-flex">
						<div class="img m-r10">
							<svg-icon icon-class="invest-icon-01" class="icon" />
						</div>
						<div class="text">
							<div class="p1">总投资项目(个)</div>
							<div class="p2 m-t5">{{ state.projectInfo.totalProjectCount }}</div>
						</div>
					</div>
					<div class="item_col d-flex">
						<div class="img m-r10">
							<svg-icon icon-class="invest-icon-02" class="icon" />
						</div>
						<div class="text">
							<div class="p3">{{ state.projectInfo.fixedRatio }}%</div>
							<div class="p1 m-t5 titleStyle">固定投资项目</div>
						</div>
						<div class="text m-l10">
							<div class="p3">{{ state.projectInfo.fixedProjectCount }}</div>
							<div class="p4 m-t5">数量</div>
						</div>
					</div>
					<div class="item_col d-flex">
						<div class="img m-r10">
							<svg-icon icon-class="invest-icon-03" class="icon" />
						</div>
						<div class="text">
							<div class="p33">{{ state.projectInfo.stockRatio }}%</div>
							<div class="p1 m-t5 titleStyle">股权投资项目</div>
						</div>
						<div class="text m-l10">
							<div class="p33">{{ state.projectInfo.stockProjectCount }}</div>
							<div class="p4 m-t5">数量</div>
						</div>
					</div>
				</div>
				<div class="card-box">
					<div class="title">今年总项目数</div>
					<div class="num">
						{{ state.projectInfo.totalProjectCount }}<span>个</span>
					</div>
					<div class="icon2-wrap" v-if="state.projectInfo.relativeRatio > 0">
						<svg-icon icon-class="invest-ion2" />
						<span>{{ state.projectInfo.relativeRatio }}%</span>
					</div>
					<div class="icon1-wrap" v-else>
						<svg-icon icon-class="invest-ion1" />
						<span>+{{ state.projectInfo.relativeRatio }}%</span>
					</div>
				</div>
			</div>

			<div class="d-flex flex-column">
				<CommonTitle class="m-b20" titleName="投资收益快报"></CommonTitle>
				<div class="right-card-style">
					<InvestmentEarnings
							ref="moduleRef6"
							:year="state.year"
					></InvestmentEarnings>
				</div>
			</div>
		</div>

		<!--	中	-->
		<div class="d-flex a-center j-sb content_center m-t30">
			<div class="d-flex flex-column">
				<CommonTitle
						titleName="固投偏差项目TOP10"
				></CommonTitle>
				<FixedInvestment class="left-card-style" ref="moduleRef2" :year="state.year"></FixedInvestment>
			</div>
			<div class="center-card-style">
				<!--	固定投资,股权投资		-->
				<public-map ref="moduleRef4" :year="state.year" />
			</div>
			<div class="d-flex flex-column">
				<CommonTitle
						titleName="项目任务年度预期情况"
				></CommonTitle>
				<div class="right-card-style">
					<ProjectYear ref="moduleRef7" :year="state.year"></ProjectYear>
				</div>
			</div>
		</div>

		<!--	下	-->
		<div class="d-flex a-center  j-sb content_bottom m-t30">
			<div class="d-flex flex-column">
				<CommonTitle titleName="年度项目计划"></CommonTitle>
				<div class="left-card-style">
					<Annualplan ref="moduleRef3" :year="state.year"></Annualplan>
				</div>
			</div>
			<div class="center-card-style d-flex flex-column j-sb">
				<common-title title-name="预算执行情况">
					<template #rightCnBox>
						<div class="head-wrap d-flex a-center">
							<el-divider direction="vertical"></el-divider>
							<div class="head-item d-flex a-center m-l10">
								<div class="icon1 m-r5"></div>
								<span>计划金额</span>
							</div>
							<div class="head-item d-flex a-center m-l10">
								<div class="icon2 m-r5"></div>
								<span>实际金额</span>
							</div>
						</div>
					</template>
				</common-title>
				<!--	预算执行情况		-->
				<budget-implementation ref="moduleRef5" :year="state.year" />
			</div>
			<div class="d-flex flex-column">
				<CommonTitle
						titleName="周报未填写TOP榜 "
				></CommonTitle>
				<div class="right-card-style">
					<weekly-report-filling ref="moduleRef8"  :year="state.year"></weekly-report-filling>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import {ElRow, ElCol, ElDatePicker, ElButton, ElEmpty, ElDivider} from "element-plus";
import CommonTitle from "@/components/CommonTitle.vue";
import FundAnalysis from "@/views/investmentProjectManagement/cockpit/components/FundAnalysis.vue";
import FixedInvestment from "@/views/investmentProjectManagement/cockpit/components/FixedInvestment.vue";
import Annualplan from "@/views/investmentProjectManagement/cockpit/components/Annualplan.vue";
import InvestmentEarnings from "@/views/investmentProjectManagement/cockpit/components/Investment.vue";
import ProjectYear from "@/views/investmentProjectManagement/cockpit/components/ProjectYear.vue";
import WeeklyReportFilling from "@/views/investmentProjectManagement/cockpit/components/weeklyReportFilling.vue";
import PublicMap from "./components/map.vue";
import BudgetImplementation from "./components/budgetImplementation.vue";

import SvgIcon from "@/components/SvgIcon/index.vue";
import { cockpitApi } from "@/api/investment";
const route = useRoute();
const router = useRouter();

/**
 * 获取年
 * @return {number}
 */
const getYear = () => {
	let date = new Date(); // 获取时间
	return date.getFullYear(); // 获取年
};

const state = reactive({
	year: "" || getYear(),
	projectInfo: {},
	projectType: {},
});

const handel = () => {};

/**
 * 项目总况
 */
const getAllProjectCount = (year) => {
	cockpitApi.getAllProjectCount({ year: year }).then((res) => {
		if (res.code === "200") {
			state.projectInfo = res.data;
		}
	});
};

/**
 * 搜索
 */
const moduleRef1 = ref(null);
const moduleRef2 = ref(null);
const moduleRef3 = ref(null);
const moduleRef4 = ref(null);
const moduleRef5 = ref(null);
const moduleRef6 = ref(null);
const moduleRef7 = ref(null);
const moduleRef8 = ref(null);
const onSearch = () => {
	getAllProjectCount(state.year);
	moduleRef1.value.onSearch();
	moduleRef2.value.onSearch();
	moduleRef3.value.onSearch();
	moduleRef4.value.onSearch();
	moduleRef5.value.onSearch();
	moduleRef6.value.onSearch();
	moduleRef7.value.onSearch();
	moduleRef8.value.onSearch();
};

onMounted(() => {
	state.year = getYear();
	getAllProjectCount(state.year);
});
</script>


<style lang="scss" scoped>
@import "@/views/investmentProjectManagement/cockpit/index.scss";
</style>
